<template>
    <div>
        <div class="main" ref="main"></div>
    </div>
</template>

<script>
    import * as echarts from "echarts";

    export default {
        name: "ScatterView",
        data(){
            return {
                myChart : null,
                // 基础散点图
                baseOption :{
                    xAxis :{
                        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
                    },
                    yAxis : {

                    },
                    series : {
                        type : "scatter", // 散点图
                        data: [220, 182, 191, 234, 290, 330, 310],
                        symbolSize: function(value) {  // 控制点的大小
                            return value / 10;
                        }
                    }
                },
                // 笛卡尔坐标系的散点图
                diKrOption : {
                    xAxis: {},
                    yAxis: {},
                    series: [
                        {
                            type: 'scatter',
                            data: [
                                [10, 5],
                                [0, 8],
                                [6, 10],
                                [2, 12],
                                [8, 9]
                            ],
                            symbolSize: 20,
                            // symbol: 'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z'
                        }
                    ]
                }
            }
        },
        mounted(){
            this.myChart = echarts.init(this.$refs.main);
            this.myChart.showLoading(); // 异步加载数据（loading动画）

            setTimeout(()=>{
                this.myChart.hideLoading();  // 取消loading
                this.myChart.setOption(this.diKrOption); // 笛卡尔坐标系的散点图
            },2000)
            // this.myChart.setOption(this.baseOption); // 基础散点图
            // this.myChart.setOption(this.diKrOption); // 笛卡尔坐标系的散点图
        },
        beforeDestroy(){
            if(this.myChart)  this.myChart.dispose();
        }
    }
</script>

<style scoped>
    .main {
        width: 60vw;
        height: 550px;
        box-shadow: 1px 1px 10px #333;
        margin: 20px auto;
    }
</style>